<template>
	<view class="container">
		<view class="header">
			<view class="shop">
				<view class="name">{{ shop.name }}</view>
				<view class="shop-hours">
					<text class="iconfont icon-shizhong"></text>
					<text style="padding-left: 8rpx">营业时间：{{ shop.startTime }} - {{ shop.endTime }}</text>
				</view>
				<view class="address">
					<view>
						<text class="iconfont icon-mendian"></text>
						<text style="padding-left: 8rpx">{{ shop.address }}</text>
					</view>
					<view @tap="gotoShop">
						<text>切换其他门店</text>
						<text class="iconfont icon-jiazai_shuaxin"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 左侧商品分类 -->
			<view class="category">
				<view
					class="category-item"
					v-for="(category, index) in categoryList"
					:key="index"
					:class="active == index ? 'category-item-selected' : 'category-item-nselected'"
					@tap="selectCategory(category.id, index)"
				>
					{{ category.name }}
				</view>
			</view>

			<!-- 右侧商品详情 -->
			<scroll-view scroll-y class="scroll-view">
				<view class="goods-list">
					<view v-for="(goods, index) in goodsListByCateId" :key="index" class="goods-item" @tap="gotoGoodsDetail(goods.id)">
						<view style="display: flex; flex-direction: column; justify-content: center">
							<view style="position: relative; width: 150rpx; height: 150rpx">
								<lazyLoad :src="goods.thumbnail" width="150rpx" height="150rpx" :isEmpty="goods.stockNum === 0 ? true : false"></lazyLoad>
								<!-- <image :src="baseUrl + goods.thumbnail" class="picture" :class="goods.stockNum == 0 ? 'sold-out-bgc' : ''" /> -->
								<view class="sold-out-wrapper" v-if="goods.stockNum == 0">
									<view class="sold-out">
										<text>线上售罄</text>
										<view style="width: 100%; padding: 15rpx">
											<text class="line"></text>
										</view>
										<text>Sold out</text>
									</view>
								</view>
							</view>
						</view>
						<view class="goods-info">
							<view class="goods-name">{{ goods.name }}</view>
							<view class="goods-price">
								<text class="first">¥</text>
								<text class="second">{{ goods.minGoodsPrice.toFixed(2) }}</text>
							</view>
							<view class="line-price">
								<text class="first">¥</text>
								<text class="second" v-if="goods.minLinePrice">{{ goods.minLinePrice.toFixed(2) }}</text>
							</view>
						</view>
						<uni-badge
							@tap.stop="addCart(index)"
							:text="goods.cartNum"
							absolute="rightTop"
							size="small"
							:offset="[5, 5]"
							style="position: absolute; right: 0; bottom: 0; padding: 20rpx"
						>
							<text class="iconfont icon-gouwuche cart-icon" :class="goods.stockNum == 0 ? 'cart-icon-sold-out' : ''"></text>
						</uni-badge>
						<DarkeCartsBall
							ref="cartBall"
							:ballImage="`url('${goods.thumbnail}')`"
							:duration="1000"
							:endPos="endPos"
							:zIndex="9999"
							ballColor="transparent"
							is3dSheet="false"
						></DarkeCartsBall>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 规格信息弹出层 -->
		<uni-popup ref="popup" class="popup" background-color="#fff">
			<GoodsPopup
				ref="goodsPopup"
				:popupGoods="popupGoods"
				:specType="specType"
				:specNameList="specNameList"
				:goodsDetailList="goodsDetailList"
				:goodsStockList="goodsStockList"
			></GoodsPopup>
		</uni-popup>
	</view>
</template>

<script>
import { listGoods } from '@/api/category';
import { handleSubscript } from '@/utils/cart.js';
import lazyLoad from '@/components/lazyLoad.vue';
import GoodsPopup from '@/components/goods_popup.vue';
import DarkeCartsBall from '@/components/darke-cartsBall/darke-cartsBall.vue';
import { mapState, mapGetters } from 'vuex';
import goodsMixin from '@/mixins/goodsMixin';
export default {
	components: {
		lazyLoad,
		GoodsPopup,
		DarkeCartsBall
	},
	mixins: [goodsMixin],
	data() {
		return {
			title: 'Hello',
			active: 0,
			categoryList: [],
			goodsListByCateId: [],
			goodsList: [],
			popupGoods: {},
			// 购物车动画飞入的终点
			endPos: {},
			ballGoodsIdx: {},

			navDetaiUrl: '/pages/goods_detail/goods_detail?goodsId=',
			navShopUrl: '/pages/shop/shop'
		};
	},
	onShareAppMessage(res) {},
	onLoad() {},
	onShow() {
		this.initData();
		this.getList();
		handleSubscript();

		uni.getSystemInfo({
			success: (res) => {
				const screenWidth = res.windowWidth; // 屏幕宽度，单位为px
				const screenHeight = res.windowHeight; // 屏幕高度，单位为px
				this.endPos = {
					x: screenWidth * (2 / 3) - 30,
					y: screenHeight
				};
			}
		});
	},
	computed: {
		...mapState('goods', ['isPopupShow']),
		...mapState('cart', ['isAddSuccess']),
		...mapGetters(['shop'])
	},
	watch: {
		isPopupShow(newVal, oldVal) {
			const pages = getCurrentPages();
			// 不是自己不用处理
			if (pages[pages.length - 1].route != 'pages/category/category') {
				return;
			}
			if (!newVal) {
				/**
				 * 此时监听到show为false，关闭购物弹出层
				 * spec_popup.vue addCart()方法内将其置为false
				 */
				this.$refs.popup.close();

				// 将show重新置为true
				this.$store.dispatch('goods/handleGoodsPopupShow', true);
			}
		},
		isAddSuccess(newVal, oldVal) {
			const pages = getCurrentPages();
			// 不是自己不用处理
			if (pages[pages.length - 1].route != 'pages/category/category') {
				return;
			}
			if (newVal) {
				// 开启商品飞入动画
				this.cartBall();
				this.updateList();
				// 重新置为false
				this.$store.dispatch('cart/handleAddSuccess', false);
			}
		}
	},
	methods: {
		initData() {
			// this.categoryList = [];
			this.goodsList = [];
			this.goodsListByCateId = [];
		},
		/**
		 * 获取商品列表
		 */
		async getList() {
			const res = await listGoods({});

			this.categoryList = res.data.categoryList;
			this.goodsList = this.goodsListByCateId = res.data.goodsList;
			this.updateList();
			// 在数组头部加入一个“全部”分类
			this.categoryList.unshift({
				name: '全部'
			});
		},
		/**
		 * 更新商品列表
		 * 更新购物车角标
		 */
		updateList() {
			this.goodsList.forEach((goods) => {
				if (goods.stockNum > 0) {
					goods.cartNum = this.$store.getters.getCartNum(goods.id);
				}
			});
		},
		selectCategory(categoryId, index) {
			this.active = index;
			if (index == 0) {
				// 全部
				this.goodsListByCateId = this.goodsList;
				return;
			}
			this.goodsListByCateId = this.goodsList.filter((item) => item.categoryId == categoryId);
		},

		/**
		 * 加入购物车
		 * @param {Object} goodsIdx
		 */
		async addCart(goodsIdx) {
			this.popupGoods = this.goodsListByCateId[goodsIdx];
			
			if (this.popupGoods.stockNum === 0) {
				return;
			}
			// 计算购物车图标的位置
			this.ballGoodsIdx = goodsIdx;

			const isPopupShow = await this.getGoodsSpecInfo(this.popupGoods.id);
			if (isPopupShow) {
				this.$refs.popup.open('bottom');
			} else {
				this.cartBall();
				this.$refs.goodsPopup.addCart();
			}
			this.updateList();
		},

		gotoGoodsDetail(goodsId) {
			uni.navigateTo({
				url: this.navDetaiUrl + goodsId
			});
		},
		gotoShop() {
			uni.navigateTo({
				url: this.navShopUrl
			});
		}
	}
};
</script>

<style lang="less">
@theme-color: #ff5a14;

.header {
	height: 260rpx;
	padding: 30rpx 20rpx;
	background-color: #fff;
}

.shop {
	box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.2);
	padding: 20rpx;
	border-radius: 8rpx;

	.name {
		font-size: 45rpx;
		padding: 10rpx 0;
	}

	.shop-hours,
	.address {
		color: #9999a6;
		font-size: 26rpx;
	}

	.shop-hours {
		padding: 10rpx 0;
	}

	.address {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.content {
	display: flex;
	flex-direction: row;
}

.content .category {
	flex: 1;
	background-color: #f7f7f7;

	.category-item {
		height: 100rpx;
		line-height: 100rpx;

		text-align: center;
		font-size: 26rpx;
	}

	.category-item-nselected {
		font-size: 26rpx;
		// border-top-right-radius: 30rpx;
		// border-bottom-right-radius: 30rpx;
	}

	.category-item-selected {
		background-color: #ffffff;
		color: @theme-color;
		font-weight: bold;
		border-left: 4rpx solid @theme-color;
	}
}

.scroll-view {
	flex: 3;
	// header高度为260，设置右侧滚动条高度为：视口高度 - 260，以保证刚好占满屏幕
	height: ~'calc( 100vh - 260rpx )';
	background-color: #fff;
	padding-left: 20rpx;
}

.content .goods-list {
	display: flex;
	flex-direction: column;
	row-gap: 30rpx;
}

.content .goods-item {
	display: flex;
	flex-direction: row;
	position: relative;
	font-size: 20rpx;

	.goods-info {
		display: flex;
		flex-direction: column;
		row-gap: 20rpx;
		padding-left: 20rpx;
		.goods-name,
		.goods-price,
		.line-price {
			font-size: 28rpx;
		}

		.goods-price,
		.line-price {
			color: @theme-color;
			font-weight: bold;
		}

		.line-price {
			opacity: 0.5;
			text-decoration: line-through;
		}

		.goods-price > .first {
			margin-right: 5rpx;
			font-size: 21rpx;
		}
		.goods-price > .second {
			font-size: 26rpx;
		}
		.line-price > .first {
			margin-right: 5rpx;
			font-size: 17rpx;
		}
		.line-price > .second {
			font-size: 23rpx;
		}
	}

	.cart-icon {
		display: block;
		background-color: @theme-color;
		color: #fff;
		padding: 15rpx;
		border-radius: 50%;
		font-size: 30rpx;
	}

	.cart-icon-sold-out {
		background-color: #999999;
	}
}

.sold-out-wrapper {
	padding: 15rpx;
}
</style>
